import React from 'react'
import { Affix, Button } from 'antd'
import Tan from "../components/Tan"
import Modal from '../components/Modal';
import "../style/gong/gong.scss"
import GongMenu from "../components/GongMenu"
import { RightOutlined,EditOutlined } from '@ant-design/icons';
import ECharts from "../components/Echart/Echarts";
function Gong() {
    const [top, setTop] = React.useState<number>(0);
  return (
    <div>
      <div className="tou_page">
         <Affix offsetTop={top}>
      <div className='head_page'>
        <img src="//lib.eqh5.com/eqx.layout/images/new_logo.svg" alt="" />
        <ul className='head_ul'>
          <li><b>免费模版</b>
            {/* <div className='ul1_page'>
             <li>1111</li>
            </div> */}
            <Tan></Tan>
          </li>
          <li>开通会员
            <ul className='ul2_page'>
              <li></li>
            </ul>
          </li>
          <li>产品服务
            <ul className='ul3_page'>
              <li></li>
            </ul>
          </li>
          <li>解决方案
            <ul className='ul4_page'>
              <li></li>
            </ul>
          </li>
          <li>内容中台
            <ul className='ul5_page'>
              <li></li>
            </ul>
          </li>
          <li>资源与合作
            <ul className='ul6_page'>
              <li></li>
            </ul>
          </li>
          <img className='img2' src="//lib.eqh5.com/eqx.layout/images/tiphot.svg" alt="" />
          <img src="//lib.eqh5.com/eqx.layout/images/vip_corner_2.png" alt="" />
        </ul>
        {/* <Button type="primary">登录/注册</Button> */}
        <Modal></Modal>

        {/* <img src="src/img/zhuce.png" alt="" className="tiao_img" /> */}

      </div>
      </Affix>
      </div>
      <div className="main_page">
        <div className="menu_left">
            <GongMenu></GongMenu>
        </div>
        <div className="main_center">
            <div className="main_left">
              <div className="main_left_zuo">
                <div className="main_left_zuo_top">
                <p style={{marginLeft:"20px",paddingTop:"20px",fontSize:"20px"}}>七安<EditOutlined /></p>
                </div>
                <div className="main_left_zuo_btm">
                  <p className='main_left_zuo_btm_p'>低至<span style={{fontSize:"30px",color:"#ff5448"}}>3.8</span>元/天 <Button>开通会员</Button></p>
                  <p className='main_left_zuo_btm_p2'>开通会员，全场模版免费用<span style={{marginLeft:"35px",fontSize:"13px"}}>查看会员特权<RightOutlined /></span></p>
                </div>
                
              </div>
              <div className="main_right">
                <div className="main_right_top">
                  <div className="today_page">
                  <div className="main_right_top_zuo">
                    <p><span style={{fontSize:"30px"}}>30</span>/5 2024</p>
                    <p style={{fontSize:"14px",color:"#ccc"}}>周四 农历 四月廿三</p>
                  </div>
                  <div className="main_right_top_you">
                    <img src="/src/img/02_08.jpg" alt="" />
                    <h4>世界无烟日</h4>
                  </div>
                  </div>
                  
                </div>
                <div className="main_right_btm">
                      <p>【童心童画】儿童节主题投票活动，精选推荐<RightOutlined /><RightOutlined /></p>
                      <p>【教程攻略】如何实现仅扫码就完成签到？点击了解<RightOutlined /><RightOutlined /></p>
                </div>
            </div>
            </div>
             {/* 我的数据 */}
        <div className="my_page">
          <div className="look_page">
             <h3>我的数据</h3>
          <ul>
            <li>作品数据</li>
            <li>分发数据</li> 
          </ul>
          <p>查看更多<RightOutlined /></p>
          </div>
         <div className="echart_page">
          <div className="echart_left">
            <div className="echart_left_top">
              <h3>活跃周报</h3>
              <p>5.20-5.26</p>
              <Button type="primary">去制作</Button>
            </div>
            <div className="echart_left_btm">
              <div className="echart_left_btm_zhou">
                <div className="echart_yuan">
                    <h2>0</h2>
                </div>
                <p>下载作品</p>
                <p style={{color:"#ccc"}}>周对比 0</p>
              </div>
              <div className="echart_left_btm_zhou">
                <div className="echart_yuan">
                    <h2>0</h2>
                </div>
                <p>创建作品</p>
                <p style={{color:"#ccc"}}>周对比 0</p>
              </div>
              <div className="echart_left_btm_zhou">
                <div className="echart_yuan">
                    <h2>0</h2>
                </div>
                <p>积分获取</p>
                <p style={{color:"#ccc"}}>周对比 0</p>
              </div>
            </div>
          </div>
          <div className="echart_right">
            <ECharts></ECharts>
          </div>
         </div>
        </div>
        </div>
       
      </div>
    </div>
  )
}

export default Gong
